<template>
  <el-dialog v-model="dialogVisible" title="矿山监控" width="800" append-to-body @close="closeDialog">
    <div class="video-div">
      <el-empty :image-size="150" description="视频数据暂未接入" v-if="videoList.length == 0" class="empty-div"/>
      <el-row :gutter="5" v-else>
        <el-col :span="12" v-for="(item, index) in videoList" :key="index" class="video-child">
          <div class="video-child-name">{{ item.deviceName }}</div>
          <video :id="item.id" :src="item.videoUrl" style="width: 100%;height: 230px;" muted controls="true"></video>
        </el-col>
      </el-row>
    </div>
    <div class="page-div" v-if="total>0">
      <el-pagination 
        v-model:current-page="queryParams.pageNum"
        background 
        layout="total, prev, pager, next" 
        :total="total"
        :page-size="queryParams.pageSize"
        @change="onPagechange"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script setup>
import useOnemapStore from "@/store/modules/onemap";
import { getMonitorByMine } from "@/api/situation";
import flvjs from "flv.js";
const onemapStore = useOnemapStore();
const emit = defineEmits(['monitorClose']);
const dialogVisible = ref(false);
const loading = ref(false);
const total = ref(0);
// 存储flv播放器实例的对象
const flvPlayers = ref([]);
const videoList = ref([
  {videoName:'宝宏1号', videoUrl:'http://218.23.184.226:8050/live/34020000001110000004_34020000001320000001.flv?sid=0', id:'sj1'},
  {videoName:'宝宏2号', videoUrl:'http://218.23.184.226:8050/live/34020000001110000004_34020000001320000003.flv?sid=0', id:'sj2'},
  {videoName:'龙跃1号', videoUrl:'http://111.38.126.130:8050/live/34020000001110000004_34020000001320000001.flv?sid=0', id:'sj3'},
  {videoName:'龙跃2号', videoUrl:'http://111.38.126.130:8050/live/34020000001110000004_34020000001320000010.flv?sid=0', id:'sj4'},
])
const queryParams = ref({
  pageNum: 1,
  pageSize: 4,
  openPitNo: ''
})

const show = () => {
  dialogVisible.value = true;
  // console.log("ceshi==",onemapStore.currentOpenPitInfo)
  queryParams.value.openPitNo = onemapStore.currentOpenPitInfo.openPitNo
  monitorByMine()
};

function monitorByMine() {
  getMonitorByMine(queryParams.value).then(res=>{
    if (res.code == 200) {
      total.value = res.total
      videoList.value = res.rows
      nextTick(()=>{
        videoList.value.forEach(item=>{
          initVideoPlayer(item.id, item.videoUrl)
        })
      })
    }
  })
}

// 切换页函数
const onPagechange = (currentPage, pageSize) => {
  queryParams.value.pageNum = currentPage;
  queryParams.value.pageSize = pageSize;
  monitorByMine();
};

// 初始化视频播放器
function initVideoPlayer(videoId, videoUrl) {
  const videoElement = document.getElementById(videoId);
  if (!videoElement) {
    console.error(`未找到ID为${videoId}的视频元素`);
    return;
  }
  if (flvjs.isSupported()) {
    // 创建flv播放器
    const flvPlayer = flvjs.createPlayer({
      type: "flv",
      url: videoUrl,
      isLive: true,
      hasAudio: false,
      hasVideo: true,
      cors: true,
    });

    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();

    console.log("FLV播放器已加载，尝试播放...");

    // 添加更多事件监听以便调试
    flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {
      console.log(`${videoId} 加载完成`);
    });

    flvPlayer.on(flvjs.Events.MEDIA_INFO, (mediaInfo) => {
    });

    // 存储播放器实例
    flvPlayers.value.push(flvPlayer);

    // 添加事件监听
    videoElement.addEventListener("play", () => {
    });

    videoElement.addEventListener("pause", () => {
      console.log(`${videoId} 暂停播放`);
    });

    videoElement.addEventListener("error", (e) => {
      console.error(`${videoId} 视频元素错误:`, e);
    });
  } else {
    console.error("您的浏览器不支持FLV.js");
  }
};

const closeDialog = () => {
  emit('monitorClose',2)
}

defineExpose({
  show
});
</script>

<style lang="scss" scoped>
.tree-content {
  height: 480px;
  overflow: auto;
  ::v-deep(.el-tree) {
    background: transparent;
    color: #fff;

    --el-tree-node-content-height: 30px;

    .el-tree-node__content:hover {
      background-color: rgba(0, 0, 0, 0.15);
    }

    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgba(31, 198, 255, 0.35);
    }

    .el-checkbox__inner {
      background-color: rgba(0, 12, 50, 1);
      // border: 1px solid #196590 !important;
    }

    // .is-current {
    //   .el-tree-node__content {
    //     background-color: rgba(31, 198, 255, 0.35);
    //   }
    // }
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;

    .node-text {
      width: 100%;
      white-space: nowrap;
      /* 文字不换行 */
      overflow: hidden;
      /* 溢出部分隐藏 */
      text-overflow: ellipsis;
      /* 显示省略号 */
    }

    .btn {
      color: #9cfefe;
      border: 1px solid #1fc6ff7d;
      background-color: rgb(156 254 254 / 15%);
      // padding: 1px 6px;
      width: 40px;
      text-align: center;
      border-radius: 2px;
    }

    .btn:hover {
      cursor: pointer;
    }
  }
}
.video-div {
  width: 100%;
  height: 460px;
  .empty-div {
    padding-top: 100px;
    box-sizing: border-box;
  }
  .video-child {
    position: relative;
    .video-child-name {
      position: absolute;
      top: 5px;
      left: 10px;
      color: #fff;
      z-index: 999;
    }
  }
}
.page-div {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
